<template>
  <div class="page-order">
    <!-- 导航栏 -->
    <van-nav-bar title="填写订单" left-text="返回" fixed left-arrow @click-left="onClickLeft" />
    <!-- 顶部区域 -->
    <div class="top">
      <!-- 左边：门票基础信息 -->
      <div class="left">
        <div class="title">{{ ticketData.name }}</div>

        <div class="end-time">{{ ticketData.booking_deadline }}</div>
        <div class="tips">
          <van-icon color="blue" name="underway-o" />
          <span>明日可定</span>
          <van-icon color="blue" name="passed" />
          <span>条件退</span>
        </div>
      </div>
      <!-- 右边：价格 -->
      <div class="right">
        <p class="price text-warning">￥{{ ticketData.final_price }}/张</p>
        <p class="tip">
          <van-button @click="showTip = true" plain square type="primary" size="mini"
            >预定须知</van-button
          >
          <van-popup v-model:show="showTip" position="bottom" :style="{ height: '80%' }">
            <TicketTips :ticketDetail="ticketData" />
          </van-popup>
        </p>
      </div>
    </div>
    <!-- 出行日期 -->
    <div class="go-date form">
      <van-cell-group>
        <van-cell title="出行日期" :value="form.play_date" @click="showCalendar = true" />
        <van-calendar v-model:show="showCalendar" @confirm="onConfirm" />
      </van-cell-group>
    </div>
    <!-- 购买数量 -->
    <div class="buy-count form">
      <van-cell-group>
        <van-cell title="购买数量" value="内容">
          <van-stepper v-model="form.buy_count" min="1" />
        </van-cell>
      </van-cell-group>
    </div>
    <!-- 收件人信息 -->
    <div class="user-msg form">
      <van-cell-group>
        <van-field
          v-model="form.to_user"
          label="收件人"
          placeholder="收件人"
          :rules="[{ required: true, message: '请填写收件人' }]"
        />
        <van-field
          v-model="form.to_phone"
          label="手机号码"
          placeholder="手机号码"
          :rules="[{ required: true, message: '请填写收件人手机号' }]"
        />
      </van-cell-group>
    </div>
    <!-- 提交订单 -->
    <van-submit-bar :price="countPrice" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
import { ajax } from '@/utils/ajax'
import { OrderApis, SightApis, AccountApis } from '@/utils/apis'
import { showNotify } from 'vant'
import { mapState, mapMutations } from 'vuex'
import TicketTips from '@/components/sight/TicketTips.vue'
import * as types from '@/store/mutation-types'
export default {
  data() {
    return {
      // 预定需知的弹框
      showTip: false,
      // 日期组件的显示和隐藏
      showCalendar: false,
      // 门票id
      ticketId: '',
      // 门票信息
      ticketData: {},
      form: {
        play_date: '',
        buy_count: 1,
        to_phone: '',
        to_user: ''
      }
    }
  },
  methods: {
    // 返回上一页
    onClickLeft() {
      this.$router.go(-1)
    },
    // 格式化日期
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },
    // 确认日期
    onConfirm(date) {
      this.showCalendar = false
      this.form.play_date = this.formatDate(date)
    },
    // 重新获取state的数据
    ...mapMutations(['updateUserInfo']),
    // 提交订单
    onSubmit() {
      ajax
        .post(OrderApis.orderSubmitUrl, {
          ticket_id: this.ticketId,
          ...this.form
        })
        .then(({ data }) => {
          console.log('submitOrderData res:', data)
          console.log(data.sn)
          showNotify({ message: '提交成功，请支付', type: 'success' })
          // 拦截返回按钮，防止重复提交订单
          this.$router.replace({ name: 'orderPayPage', params: { sn: data.sn } })
        })
        .catch((err) => {
          console.log('err', err)
          if (err.response.status == 401) {
            showNotify({ message: '您还未登录，跳转到登录页面', type: 'danger' })
            this.$router.replace({ name: 'loginPage' })
          }
        })
    },
    // 门票信息
    getTicketDetail() {
      ajax.get(`${SightApis.ticketDetailUrl}${this.ticketId}`).then(({ data }) => {
        console.log('ticket data:', data)
        this.ticketData = data
      })
    },
    // 获取用户信息
    getUserInfo() {
      // 获取用户信息到vuex
      ajax.get(AccountApis.getInfoUrl).then(({ data }) => {
        // console.log(data)
        this.updateUserInfo(data)

        // 更改状态
        this.$store.commit(types.CHANGE_LOGIN)

        // 将数据填充到表单中
        this.form.to_user = this.nickname
        this.form.to_phone = this.phone
      })
    }
  },
  computed: {
    // 计算票价
    countPrice() {
      return this.form.buy_count * this.ticketData.final_price * 100
    },
    ...mapState({
      phone: (state) => state.user.phone,
      nickname: (state) => state.user.nickname
    })
  },
  created() {
    this.ticketId = this.$route.params.id
    // 获取用户信息
    this.getUserInfo()

    // 获取门票信息
    this.getTicketDetail()
  },
  components: {
    TicketTips
  }
}
</script>

<style lang="less" scoped>
.page-order {
  background-color: #f8f8f8;
  .top {
    display: flex;
    flex-direction: row;
    flex: 1;

    height: auto;

    margin-top: 46px;
    padding: 10px;

    background: #fff;
    .left {
      width: 250px;
      .title {
        font-weight: 800;
        font-size: 20px;
      }
      .end-time {
        font-size: 12px;
        margin: 8px 0;
        color: #999;
      }
      .tips {
        font-size: 14px;
      }
    }
    .right {
      flex-grow: 1;
      margin-left: 18px;
      .price {
        margin: 0;

        text-align: right;
        font-size: 18px;
      }
      .tip {
        margin: 0;
        text-align: right;
        font-size: 8px;
      }
    }
  }
  // 出行日期

  // 购买数量
  .buy-count {
    .van-field__value {
      text-align: right;
    }
  }

  // 收件人信息
  .user-msg {
    :deep(.van-cell__title) {
      width: 60px;
    }
  }

  .form {
    margin-top: 10px;
  }
}
</style>